

<div class="container-fluid">
    <div class="toolbar">
        <button class="btn btn-sm btn-success" id="add-bush-btn" data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-type="add">添加</button>
    </div>

    <table id="table"></table>
</div>


<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="form-title"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="user-name"  class="control-label">用户名：</label>
                        <input type="text" class="form-control" id="user-name">
                    </div>
                    <div class="form-group">
                        <label for="real-name"  class="control-label">真实姓名：</label>
                        <input type="text" class="form-control" id="real-name">
                    </div>
                    <div class="form-group">
                        <label for="mail"  class="control-label">邮箱：</label>
                        <input type="text" class="form-control" id="mail">
                    </div>
                    <div class="form-group">
                        <label for="phone"  class="control-label">手机：</label>
                        <input type="text" class="form-control" id="phone">
                    </div>
                    <div class="form-group">
                        <label for="role-list"  class="control-label">角色：</label>
                            <select id="role-list" class="form-control">

                            </select>
                            <ul id="user-role" class="list-inline">

                            </ul>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>
<style>
    #user-role{
        margin-top: 5px;
    }
    #user-role>li{
        position: relative;
        margin-left: 5px;

    }
    .close-btn{
        position: absolute;
        top: -5px;
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        border-radius: 15px;
        right: -4px;
    }
    .close-btn:hover{
        cursor: pointer;
    }
</style>

<script>
    $(function () {

        let app={
            tableObj:$('#table'),
            modal:$('#modal-form'),
            roleListObj:$('#role-list'),
            userRoleObj:$('#user-role'),
            btnSubmitObj:$('#submit'),
            userNameObj:$('#user-name'),
            realNameObj:$('#real-name'),
            mailObj:$('#mail'),
            phoneObj: $('#phone'),
            init:function (){
                let self=this;
                self.initTable();
                self.event();
            },
            initTable:function (){
                let self=this;
                self.tableObj.destroyTable().initTable({
                    url: '/admin/user/page',
                    columns: [
                        {
                            title: '用户名',
                            visible: true,
                            align: 'center',
                            field: 'user_name',
                            valign: 'middle',
                            width:"15%"
                            // formatter: function (value, row, index) {
                            //     return index + 1;
                            // }
                        },
                        {
                            title: '真实姓名',
                            field: 'real_name',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%"
                        },
                        {
                            title: '邮箱',
                            field: 'email',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%"
                        },
                        {
                            title: '手机',
                            field: 'phone',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%"

                        },
                        {
                            title: '状态',
                            field: 'status',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"15%",

                            formatter: function (value, row, index) {
                                if(value===1){
                                    return "正常"
                                }else{
                                    return "停用"
                                }

                            }
                        },
                        {
                            title: '操作',
                            field: 'operator',
                            visible: true,
                            align: 'center',
                            valign: 'middle',
                            sortable: false,
                            width:"25%",

                            formatter: function (value, row, index) {
                                value=row["id"]
                                let statusTxt="启用"
                                let dataStatus=1
                                let statusClass="btn-primary"
                                let status=row["status"]
                                if(status===1){
                                    dataStatus=2
                                    statusTxt="停用"
                                    statusClass="btn-danger"
                                }
                                return "<div class='btn-group operator-group' ><a  data-type='edit' class='btn btn-xs btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id="+value+">编辑</a><a class='btn btn-xs  "+statusClass+" user-status'  data-type='del'   data-id="+value+" data-status="+dataStatus+">"+statusTxt+"</a><a  class='btn btn-xs btn-success rest-btn'   data-id="+value+">密码重置</a></div>"
                            }
                        }
                    ]
                });
            },
            event:function (){
                let self=this;
                self.tableObj.on('click','.user-status',function (){


                    let id=parseInt($(this).attr('data-id'));
                    let status=parseInt($(this).attr('data-status'));

                    if(status==0){
                        doPost("/admin/user/remove",{id:id,status:status},function (data){
                            self.refreshTale();
                        })
                        return
                    }

                    doPost("/admin/user/enable",{id:id,status:status},function (data){
                        self.refreshTale();
                    })
                    return

                }).on('click','.rest-btn',function (){
                    let id=parseInt($(this).attr('data-id'));
                    doPost("/admin/user/resetpwd",{id:id})
                })
                self.modal.on('show.bs.modal', function (event) {

                    let button = $(event.relatedTarget),
                        dType = button.data('type'),
                        modal = $(this),
                        userNameObj=self.userNameObj,
                        realNameObj=self.realNameObj,
                        mailObj=self.mailObj,
                        phoneObj=self.phoneObj,
                        roleList=self.roleListObj,
                        userRoleObj= self.userRoleObj,
                        id=button.data('id')
                    if(!id){
                        id=0
                    }
                    modal.attr('data-id',id);
                    modal.attr('data-type',dType);
                    if(dType==="edit"){

                        modal.find('.modal-title').text('编辑')
                        doGet("/admin/user/find?id=" + id, function (data) {
                            userNameObj.val(data.data.user_name)
                            realNameObj.val(data.data.real_name)
                            mailObj.val(data.data.email)
                            phoneObj.val(data.data.phone)
                        })
                    }else{
                        modal.find('.modal-title').text('添加');
                    }

                    roleList.append('<option value="-1">选择角色</option>');
                    //角色
                    doGet("/admin/role/getrolelist?uid="+id,function (data){

                        //角色选中
                        data.data.forEach(function (role) {
                            if (role.checked) {
                                userRoleObj.append("<li class='btn-primary' data-roleid=" + role.role_id + " data-rolename=" + role.role_name + "><span>" + role.role_name + "</span><span class='close-btn btn-info'>x</span></li>");
                            } else {
                                roleList.append("<option value='" + role.role_id + "'>" + role.role_name + "</option>");
                            }
                        });

                    })

                }).on('hide.bs.modal',function (event){
                    self.restModal();
                })
                self.roleListObj.change(function (){
                    let curOpt= $(this).find('option:selected'),
                        roleID=parseInt(curOpt.val()),
                        roleName=curOpt.text();
                    if(roleID<=0){
                        return
                    }
                    $('#user-role').append("<li class='btn-primary' data-roleid="+roleID+" data-rolename="+roleName+"><span>"+roleName+"</span><span class='close-btn btn-info'>x</span></li>");
                    curOpt.remove();
                })
                self.userRoleObj.on('click','.close-btn',function (){

                    let self=this,roleLi=$(this).closest('li'),
                        roleID=parseInt(roleLi.attr('data-roleid')),
                        roleName=roleLi.attr('data-rolename');
                    self.roleListObj.append("<option value='"+roleID+"'>"+roleName+"</option>")
                    roleLi.remove();

                });
                self.btnSubmitObj.click(function (){

                    let modal=self.modal,
                        id=parseInt(modal.attr('data-id')),
                        userNameObj=self.userNameObj,
                        realNameObj=self.realNameObj,
                        mailObj=self.mailObj,
                        phoneObj=self.phoneObj,
                        roleList=self.roleListObj,
                        userRoleObj= self.userRoleObj,
                        dType=modal.attr('data-type'),
                        roleArr=[];

                    //获取角色列表
                    userRoleObj.find("li").each(function (o){
                        let roleID=parseInt($(this).attr('data-roleid'));
                        roleArr.push(roleID);
                    });
                    switch (dType){
                        case "add":
                            doPost("/admin/user/add",{
                                "name":userNameObj.val(),
                                "real_name":realNameObj.val(),
                                "email":mailObj.val(),
                                "phone":phoneObj.val(),
                                "role_ids":roleArr.join(",")
                            },function (data) {
                                 self.refreshTale();
                            })
                            break;
                        case "edit":
                            doPost("/admin/user/update",{
                                "id":id,
                                "name":userNameObj.val(),
                                "real_name":realNameObj.val(),
                                "email":mailObj.val(),
                                "phone":phoneObj.val(),
                                "role_ids":roleArr.join(",")
                            },function (data) {
                                self.refreshTale();
                            })
                            break;
                    }
                });

            },
            refreshTale:function(){
                let self=this;
                self.initTable();
            },
            restModal:function(){
                let self=this;
                self.userNameObj.attr('readonly',false).val("")
                self.realNameObj.attr('readonly',false).val("")
                self.mailObj.attr('readonly',false).val("")
                self.phoneObj.attr('readonly',false).val("");
                self.userRoleObj.empty();
                self.roleListObj.empty();
            }
       }
        app.init();
    });

</script>


